<template>
	<div>
		<jk-dialog
			v-model="showDialog"
			:title="`${searchParams.MachineName || '无'}-详情`"
			width="1200px"
			append-to-body
			:show-close-btn="true"
			:show-confirm-btn="false"
			:show-cancel-btn="false"
			@on-close="onVisibleChange(false)"
			@on-visible-change="onVisibleChange"
		>
			<!--<div ref="box1" class="margin-bottom-10 flex-end-center">
                <jk-select v-model="searchParams.MachineName" class="search-bar-item-size1 item-gap" value-key-name="IDMachine" label-key-name="MachineName" size="small" :clearable="false" :option-list="machineList" @change="onMachineChange"></jk-select>
                <div class="">
                    <el-button circle icon="el-icon-search" :loading="refreshBtnLoading" size="small" type="primary" @click="onRefreshBtn"></el-button>
                </div>
            </div>
            <header ref="box2" class="margin-bottom-10 flex-center">
                &lt;!&ndash;<div class="flex-start-center">
                    <div
                        v-for="(item, index) in stateList"
                        :key="index"
                        class="margin-right-10 flex-start-center"
                    >
                        <jkStateBar :state="item.id" :state-list="stateList"></jkStateBar>
                        <span>({{ item.count || 0 }})</span>
                    </div>
                </div>&ndash;&gt;
                <el-checkbox-group v-model="checkArr" size="mini" @change="onCheckChange">
                    <el-checkbox-button v-for="item in stateList" :key="item.id" :label="item.id">
                        <div class="flex-start-center">
                            <jkStateBar :state="item.id" :state-list="stateList" :show-text="false"></jkStateBar>
                            <span>{{ item.name }}</span>
                            <span>({{ item.count || 0 }})</span>
                        </div>
                    </el-checkbox-button>
                </el-checkbox-group>
            </header>
            <article class="machine-list-box" :style="{ height: `${dialogTableHeight - 20}px` }">
                <div class="machine-list-box-inner">
                    <el-row :gutter="4">
                        <el-col
                            v-for="(item, index) in tableData"
                            :key="index"
                            :span="3"
                        >
                            <div class="machine-item" :style="{ background: setColor(item.status) }">
                                <div style="color: #e8eaec;font-size: 13px;">{{ item.RPM || 0 }}</div>
                                <div style="font-weight: 500;">{{ item.SpindleName || 0 }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </article>-->
			<el-form ref="ruleForm" label-width="180px">
				<div class="flex-between-center margin-bottom-4">
					<div class="flex-start-center">
						<span>状态：</span>
						<xs-report-state-bar :status="ruleForm.CurMachineStatus"></xs-report-state-bar>
					</div>
					<div class="flex-start-center">
						<div class="item-gap"><el-button size="mini" type="primary" @click="xxtbDialogState = true">详细图表</el-button></div>
						<el-button size="mini" type="primary" @click="dzdtDialogState = true">锭子断头次数</el-button>
					</div>
				</div>
				<jk-card class="margin-bottom-10">
					<el-row>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="品种">
								<span class="read-only-2">{{ ruleForm.ArticleName || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="运行时间">
								<span class="read-only-2">{{ ruleForm.DisTime || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="停车次数">
								<span class="read-only-2">{{ ruleForm.SSTOP || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="停车时间">
								<span class="read-only-2">{{ ruleForm.SSTIME || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="落纱次数">
								<span class="read-only-2">{{ ruleForm.DOFF || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="落纱时间(分钟)">
								<span class="read-only-2">{{ ruleForm.DTIME || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="平均落纱时间(分钟)">
								<span class="read-only-2">{{ ruleForm.AveDTIME || 0 }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="当前生产速率(米/分钟)">
								<span class="read-only-2">{{ ruleForm.MpM || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="平均生产速率(米/分钟)">
								<span class="read-only-2">{{ ruleForm.MPMC || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="产量(千米)">
								<span class="read-only-2">{{ ruleForm.Kilometer || 0 }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="产量(千米)">
								<span class="read-only-2">{{ ruleForm.Kilometer || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="产量(千克)">
								<span class="read-only-2">{{ ruleForm.KG || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="普通断头次数(次)">
								<span class="read-only-2">{{ ruleForm.EBreak || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="平均锭数(转/分钟)">
								<span class="read-only-2">{{ ruleForm.AverRPM || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="捻度(捻/米)">
								<span class="read-only-2">{{ ruleForm.TPM || 0 }}</span>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="单锭产量(克)">
								<span class="read-only-2">{{ ruleForm.GPSS || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="运行时间效率">
								<span class="read-only-2">{{ ruleForm.EffTime || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="锭子效率">
								<span class="read-only-2">{{ ruleForm.EffQty || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="总效率">
								<span class="read-only-2">{{ ruleForm.EffGlobal || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="当前断头(次)">
								<span class="read-only-2">{{ ruleForm.CurBrokenSpindles || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="总断头次数(次)">
								<span class="read-only-2">{{ ruleForm.TotalBreaks || 0 }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="千锭时断头">
								<span class="read-only-2">{{ ruleForm.TPH || 0 }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</jk-card>
			</el-form>
		</jk-dialog>
		<dzdtDialog
			:if-test="ifTest"
			:data-item="dataItem"
			:dialog-state="dzdtDialogState"
			@on-visible-change="(e) => dzdtDialogState = e"
		></dzdtDialog>
		<xxtbDialog
			:if-test="ifTest"
			:data-item="dataItem"
			:dialog-state="xxtbDialogState"
			@on-visible-change="(e) => xxtbDialogState = e"
		></xxtbDialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { spinReportProductionStatementGetList } from '../../../api/production/reports';
    import xsReportStateBar from '../xsProductionReport/xs-report-state-bar';
    import dzdtDialog from './components/dzdt-dialog';
    import xxtbDialog from './components/xxtb-dialog';
    export default {
        components: {
            xxtbDialog,
            dzdtDialog,
            xsReportStateBar
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            ifTest: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            machineList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                xxtbDialogState: false,
                dzdtDialogState: false,
                checkArr: [5, 1, 4, -1],
                refreshBtnLoading: false,
                stateList: [
                    { count: 0, id: 0, name: '正常', color: '#19be6b' },
                    { count: 0, id: 5, name: '断头', color: '#e56062' },
                    { count: 0, id: 1, name: '弱捻', color: '#ff9900' },
                    { count: 0, id: 4, name: '无效', color: '#d759b3' },
                    { count: 0, id: -1, name: '空锭', color: '#7F7F7F' }
                ],
                tableData: [],
                showDialog: false,
                searchParams: {
                    MachineName: ''
                },
                originalData: [],
                interVal: {},
                ruleForm: {},
                dataParams: {}
            };
        },
        methods: {
            onCheckChange() {
                this.getDataByStates();
            },
            getDataByStates() {
                this.tableData = this.originalData.filter(x => this.checkArr.includes(Number(x.status)));
            },
            onMachineChange(e) {
                this.searchParams.MachineName = this.machineList.find(x => x.IDMachine === e) ? this.machineList.find(x => x.IDMachine === e).MachineName : '';
            },
            /* getListRequest() {
                if (!this.searchParams.MachineName) return;
                this.refreshBtnLoading = true;
                return spinReportSpindlesReportGetSpindlesData({
                    machineId: this.searchParams.MachineName,
                    ifTest: this.ifTest
                }).then(res => {
                    this.refreshBtnLoading = false;
                    if (res.data.status === 200) {
                        this.originalData = res.data.res ? res.data.res.boarddata.map(x => {
                            return x;
                        }) : [];
                        this.tableData = JSON.parse(JSON.stringify(this.originalData));
                        this.stateList.forEach(x => {
                            x.count = 0;
                            this.tableData.forEach(k => {
                                if (x.id === Number(k.status)) {
                                    x.count++;
                                }
                            });
                        });
                        this.getDataByStates();
                    }
                });
            },*/
            setColor(status) {
                const v = this.stateList.find(x => x.id === parseInt(status)) || {};
                return v.color;
            },
            onRefreshBtn() {
                this.tableData = [];
                // this.getListRequest();
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    this.clearTimer();
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getXsProductionReportItemRequest() {
                return spinReportProductionStatementGetList({
                    ifTest: this.ifTest
                }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res && res.data.res.machineList ? res.data.res.machineList.find(x => x.MachineName === this.dataItem.MachineName) : {};
                    }
                });
            },
            runData() {
                this.getXsProductionReportItemRequest();
                this.clearTimer();
                /* this.interVal = setInterval(() => {
                    this.getListRequest();
                    this.getXsProductionReportItemRequest();
                }, 5000);*/
            },
            clearTimer() {
                clearInterval(this.interVal);
            }
        },
        watch: {
            dialogState(newVal) {
                if (newVal) {
                    const item = JSON.parse(JSON.stringify(this.dataItem)) || {};
                    this.$set(this.searchParams, 'IDMachine', item.IDMachine);
                    this.$set(this.searchParams, 'MachineName', item.MachineName);
                    this.runData();
                }
                this.showDialog = newVal;
            }
        }
    };
</script>
<style scoped lang="scss">
$border_color: #e8eaec;
.machine-list-box {
    width: 100%;
    height: 100%;
    padding: 10px;
    border: solid 1px $border_color;
    box-sizing: border-box;
    border-radius: 6px;
    overflow: hidden;
    .machine-list-box-inner {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        .machine-item {
            height: 44px;
            margin-bottom: 4px;
            border-radius: 6px;
            border: solid 1px #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            color: #fff;
        }
    }
}
</style>
